<!-- Home的组件 -->
<template>
<div class="home">
  <div style="height: 18px;"></div>
  <div class="box">
    <div style="background-color: #fc3158;">
      <h5 style="font-size:20px;margin-left: 15px;">用户数：</h5>
      <h5 style="font-size:20px;margin-left: 20px;">{{box1}}</h5>
    </div>
    <div style="background-color: #147efb;">
      <h5 style="font-size:20px;margin-left: 15px;">今日注册：</h5>
      <h5 style="font-size:20px;margin-left: 20px;">{{box2}}</h5>
    </div>
    <div style="background-color: #53d769;">
      <h5 style="font-size:20px;margin-left: 15px;">PV：</h5>
      <h5 style="font-size:20px;margin-left: 20px;">{{box3}}</h5>
    </div>
    <div style="background-color: #635a5a;">
      <h5 style="font-size:20px;margin-left: 15px;">UV：</h5>
      <h5 style="font-size:20px;margin-left: 20px;">{{box4}}</h5>
    </div>
  </div>
  <div style=" margin-top: 90px;width: 675px;margin-left: 25px;height: 320px;" id="echart1" >
  </div>
</div>
</template>

<script>
// import echarts from 'echarts'
import china from 'echarts/map/js/china.js'
export default {
  data () {
    return {
      // box的div数据
      box1: '',
      box2: '',
      box3: '',
      box4: '',
      // 地图
      echarts1_data: []
    }
  },
  methods: {
    // axios请求home数据
    async getbox () {
      try {
        // !!!!!route
        const res = await this.$axios.get('http://47.106.237.228:10004/api/houtai/home')
        // console.log(res.data)
        // this.product = res.data
        // 拿到数组
        const tup = res.data.data[0]
        // console.log(tup)
        // 拿到 box1 box2 box3 box4
        this.box1 = tup.yongh
        this.box2 = tup.dengl
        this.box3 = tup.zhuc
        this.box4 = tup.liul
      } catch (error) {
        console.log(error)
      }
    },
    // axios请求地图数据
    async getditu () {
      try {
        // !!!!!route
        const res = await this.$axios.get('http://47.106.237.228:10004/api/houtai/home_ditu')
        // console.log(res.data)
        // this.product = res.data
        // 拿到数组
        const tup = res.data.data
        this.echarts1_data = tup
        this.drawLine()
        // console.log(tup)
        // 拿到 box1 box2 box3 box4
        // console.log(tup)
      } catch (error) {
        console.log(error)
      }
    },
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('echart1'))
      // 数据
      var mydata = this.echarts1_data
      myChart.setOption({
        backgroundColor: '#f2f2f2',
        title: {
          text: '各省份的订单情况',
          x: 'center',
          y: '5%'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },
        roam: true,
        dataRange: {
          min: 0,
          max: 5,
          x: '5%',
          y: '50%',

          splitList: [

            {
              start: 150,
              end: 500,
              label: '大于1000',
              color: '#b3ffb3'

            }, {
              start: 80,
              end: 150,
              label: '500-1000',
              color: '#80bfff'
            }, {
              start: 20,
              end: 80,
              label: '100-500',
              color: '#ff704d'
            },

            {
              start: 0,
              end: 20,
              label: '0-100',
              color: '#5cd65c'
            }

          ],
          color: ['red', 'gold', 'lightgrey']

        },
        roamController: {
          show: true,
          x: 'right',
          mapTypeControl: {
            china: true
          }
        },
        series: [{
          name: '生猪',
          type: 'map',
          mapType: 'china',
          roam: false,
          itemStyle: {
            normal: {
              label: {
                show: true
              }
            },
            emphasis: {
              label: {
                show: true
              }
            }

          },
          data: mydata
        }]
      })
    }
  },
  created () {
    // 调用methods的
    this.getbox()
    this.getditu()
  },
  mounted () {

  }
}
</script>

<style lang="less" scoped>
    .home {
        height: 550px;
        width: 730px;
        background: #d3dce6;
        margin-top: 15px;
    }

    h3 {
        text-align: center;
    }

    .box {
        width: 100%;
        height: 100px;
        margin: 1px auto;
        display: flex;
    }

    .box div {
        height: 150px;
        width: 150px;
        margin-left: 25px;
    }
</style>
